<template>
    <dl class="detail-type">
        <dt>
            <!-- @click="isShow = !isShow" -->
            <span class="tit">收货信息</span>
            <el-button v-if="edit" type="primary" size="mini" @click.stop="choiceCus()" :disabled="loading">选择地址
            </el-button>
        </dt>
        <el-collapse-transition>
            <dd v-show="isShow" v-loading="loading">
                <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                    <el-row>
                        <el-descriptions class="margin-top decs" :column="2" :size="size" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-user"></i>
                                    收货人
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="receipt_admin_name">
                                        <span class="p">{{ form.receipt_admin_name }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-location-outline"></i>
                                    收货地址
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="address">
                                        <span class="p">{{ form.address }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-mobile-phone"></i>
                                    收货手机
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="receipt_mobile">
                                        <span class="p">{{ form.receipt_mobile }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item>
                            <!-- <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-phone"></i>
                                    收货电话
                                </template>
                                <el-col :span="24">
                                    <el-form-item prop="receipt_telephone">
                                        <span class="p">{{ form.receipt_telephone }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-descriptions-item> -->
                        </el-descriptions>
                    </el-row>
                </el-form>
                <el-dialog  title="选择地址" visible v-if="detailShow == 'choice'" @close="close()" width="800px" append-to-body
                    :close-on-click-modal="false">
                    <!-- :modal-append-to-body="false" -->
                    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-con">
                        <el-form-item prop="key" style="margin-right: 25px">
                            <el-input v-model="queryParams.key" placeholder="请输入地址信息" clearable size="small"
                                @input="handleQuery" />
                        </el-form-item>
                    </el-form>
                    <el-table border v-loading="diaLoading" :data="tableList" ref="tableList" v-tableHeight
                        :height="tableList && tableList.length > 0 ? '452px' : '120px'" @select-all="onSelectAll"
                        @selection-change="selectItem" @row-click="onSelectOp">
                        <el-table-column type="selection" width="55" align="center" fixed="left" />
                        <el-table-column label="收款人姓名" align="center" prop="name" />
                        <el-table-column label="省份" align="center" prop="province" />
                        <el-table-column label="城市" align="center" prop="city" />
                        <el-table-column label="区/县" align="center" prop="area" />
                        <el-table-column label="详细地区" align="center" prop="detailed" />
                        <el-table-column label="手机号" align="center" prop="mobile" />
                        <!-- <el-table-column label="电话" align="center" prop="telephone" /> -->
                    </el-table>
                    <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit" @pagination="getList" />
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="close()">取 消</el-button>
                        <el-button type="primary" @click="submit" :disabled="diaLoading">确 定</el-button>
                    </span>
                </el-dialog>
            </dd>
        </el-collapse-transition>
    </dl>
</template>
<script>
import {  getAddressLists } from "@/api/purchaseOrder/purchase.js"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
            form: {
                receipt_admin_name: null,
                address: null,
                receipt_mobile: null,
                receipt_telephone: null,
            },
            rules: {
                receipt_admin_name: [{ required: true, message: "请选择收货人", trigger: "change" },],
                address: [{ required: true, message: "请选择收货地址", trigger: "change" },],
                receipt_mobile: [{ required: true, message: "请选择收货手机", trigger: "change" },],
                // receipt_telephone: [{ required: true, message: "请选择收货电话", trigger: "change" },],
            },
            diaLoading: false,
            detailShow: '',
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 10,
                key: ""
            },
            tableList: [],
            selectData: {},
            size: 'mini',
            edit: this.handleShow == "detail" ? false : true,
        }
    },
    created() {
        if (this.handleShow == "detail") {
            this.form.war_id = this.data.war_id
            this.form.receipt_admin_name = this.data.receipt_admin_name
            this.form.address = this.data.receipt_province ? this.data.receipt_province + this.data.receipt_city + this.data.receipt_area + this.data.receipt_detailed : null
            this.form.receipt_province = this.data.receipt_province
            this.form.receipt_city = this.data.receipt_city
            this.form.receipt_area = this.data.receipt_area
            this.form.receipt_detailed = this.data.receipt_detailed
            this.form.receipt_mobile = this.data.receipt_mobile
            this.form.receipt_telephone = this.data.receipt_telephone
        }
    },
    methods: {
        choiceCus() {
            this.getList()
            this.detailShow = 'choice'
        },
        getList() {
            this.diaLoading = true;
             getAddressLists(this.queryParams).then(res => {
                this.tableList = res.data.lists;
                this.pageCount = res.data.pageCount;
                this.diaLoading = false;
            });
        },
        onSelectAll() {
            this.$refs.tableList.clearSelection();
        },
        selectItem(rows) {
            if (rows.length > 1) {
                const newRows = rows.filter((it, index) => {
                    if (index == rows.length - 1) {
                        this.$refs.tableList.toggleRowSelection(it, true);
                        return true;
                    } else {
                        this.$refs.tableList.toggleRowSelection(it, false);
                        return false;
                    }
                });
                this.multipleSelection = newRows;
            } else {
                this.multipleSelection = rows;
            }
            // this.userId = this.multipleSelection.length? this.multipleSelection[0].guid: "";
            this.selectData = this.multipleSelection[0]
        },
        onSelectOp(row) {
            this.$refs.tableList.clearSelection();
            this.$refs.tableList.toggleRowSelection(row, true);
            this.multipleSelection = [];
            this.multipleSelection.push(row);
        },
        close() {
            this.selectData = {}
            this.detailShow = ''
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        submit() {
            if (this.selectData.id) {
                let data = this.selectData
                this.form.war_id = data.id
                this.form.receipt_admin_name = data.name
                this.form.address = data.province + data.city + data.area + data.detailed
                this.form.receipt_province = data.province
                this.form.receipt_city = data.city
                this.form.receipt_area = data.area
                this.form.receipt_detailed = data.detailed
                this.form.receipt_mobile = data.mobile
                // this.form.receipt_telephone = data.telephone
                this.close()
            } else {
                this.$message.error('请选择地址之后再点击确定');
            }
        }
    },
}

</script>
<style scoped lang='scss'>
.decs {
    /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
        padding: 0 10px;
    }
}

/deep/.el-descriptions-item__cell {
    padding: 0;
}

/deep/ .el-col {
    margin: 0px;
    padding: 0px;
    height: 30px;
    line-height: 30px;
}

/deep/.el-form-item__error {
    top: 21%;
    right: 5% !important;
    left: unset;
}

.p {
    font-size: 12px;
}
</style>